<template>
  <div
    ref="content"
    class="page-fs"
  />
</template>

<script setup>
import {nextTick, onUpdated, ref} from "vue";
import * as THREE from "three";

const content = ref()

onUpdated(() => {
  nextTick(() => {
  })
})

const mapObj = {
  init() {
    // 创建webGL渲染器
    this.renderer = new THREE.WebGLRenderer( { antialias: true,alpha: true} );
    this.renderer.shadowMap.enabled = true; // 开启阴影
    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
    this.renderer.toneMappingExposure = 1.25;

// 根据自己的需要调整颜色模式
// this.renderer.outputEncoding = THREE.sRGBEncoding;

    this.renderer.outputEncoding = THREE.sHSVEncoding;
    this.renderer.setPixelRatio( window.devicePixelRatio );
// 清除背景色，透明背景
    this.renderer.setClearColor(0xffffff, 0);
    this.renderer.setSize(this.width, this.height);

// 场景
    this.scene = new THREE.Scene();
    this.scene.background = null
// 相机 透视相机
    this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, 0.1, 5000);
    this.camera.position.set(0, -40, 70);
    this.camera.lookAt(0, 0, 0);
  }
}


</script>

<style scoped>

</style>